<template>
    <div>
        <nav>{{ headTitle }}</nav>
    </div>
</template>

<script>

export default {
    name:'Headers',
    props: ['headTitle'],
    data: function () {
        return {
            testData: 1 // 这个对象里面定义所有的变量 这些变量可以 在html直接和dom绑定
        }
    },
    mounted: function () {
        // 生命周期函数， 有好几个 执行的顺序都不一样，可以根据场景 选择不同的生命周期函数 这块一般是初始化数据的地方
    },
    methods: { // 这里写所有的方法， 这些方法可以在 方法内部使用this.方法名调用，也可以在html 中使用@时间名 = ‘函数名()’调用
        init() {
            // 实例方法
            // 使用this.变量可以访问data中的变量
            console.log(this.testData)
        }
    }
}
</script>

<style  scoped>

    
nav{
    position: relative;
    text-indent:40px;
}
nav::after{
    content: '';
    width: 5px;
    height: 20px;
    background-color: rgb(41, 132, 248);
    position: absolute;
    top: 1px;
    left: 10px;
    border-radius: 5px;
}
</style>